<template>
    <view class="login-page">
        <view class="login-header">
            <view class="bac"><image class="bac" src="../../static/timg.jpg" mode="widthFix"></image></view>
            <view class="lang-box">
                <view class="option-box">
                    <view class="option" @click="naviTo('./lang')">
                        <view class="img"><image :src="i18n.login.langImg" mode="widthFix"></image></view>
                        <text class="txt">{{ $t.Language }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="logo"><image src="../../static/logo.png" mode="widthFix"></image></view>
        <view class="logo-input">
            <view class="input-box">
                <image class="input-icon" src="../../static/phone.png" />
                <input class="input" type="number" :placeholder="i18n.login.inputUserName" placeholder-class="placeholder" v-model="phone" maxlength="11" />
                <image class="input-icon-rt01" src="../../static/clean.png" @click="cleanPhone" />
            </view>
            <view class="input-box">
                <image class="input-icon" src="../../static/mima.png" />
                <input class="input" :password="pwdStatus" :placeholder="i18n.login.password" placeholder-class="placeholder" maxlength="16" />
                <image class="input-icon-rt" src="../../static/eye.png" @click="changePassword" />
            </view>
        </view>

        <view class="submit" @click="login">
            <text class="submit-text">{{ i18n.login.login }}</text>
        </view>

        <view class="tip">
            <view class="lbox">
                <text class="tip-text">{{ i18n.login.forget }}</text>
            </view>
            <view class="rbox">
                <text class="tip-text">{{ i18n.login.registration }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pwdStatus: true,
            phone: ''
        };
    },
    computed: {
        i18n() {
            return this.$t('message');
        }
    },
    methods: {
        login() {
            uni.showLoading({
                title: this.i18n.popup.loading
            });
            setTimeout(function() {
                uni.switchTab({
                    url: '/pages/index/index'
                });
                uni.hideLoading();
            }, 500);
        },
        // 密码是否可见
        changePassword() {
            this.pwdStatus = !this.pwdStatus;
        },
        // 输入清空
        cleanPhone() {
            this.phone = '';
        },
        naviTo(url) {
            uni.navigateTo({
                url: url
            });
        }
    }
};
</script>

<style>
.model {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}
.selectlanguage {
    width: 400upx;
    height: 400upx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background: #fff;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50upx 0;
    border-radius: 20upx;
}
.selectlanguage view {
    height: 100upx;
    line-height: 100upx;
    color: #eabb76;
}
.login-page {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-header {
    margin-bottom: 80upx;
    width: 100%;
    position: relative;
}
.lang-box {
    display: flex;
    justify-content: space-between;
    /* width: 400upx; */
    position: absolute;
    right: 30upx;
    top: 44upx;
}
.lang-box .lanuage {
    color: #fff;
    font-size: 28upx;
}
.lang-box .option-box {
    display: flex;
    flex-direction: column;
}
.lang-box .option {
    display: flex;
}
.lang-box .option .img {
    margin-right: 10upx;
    width: 44upx;
}
.lang-box .option .img image {
    width: 100%;
    height: auto;
}
.lang-box .option .txt {
    color: #fff;
    font-size: 30upx;
}
.login-page .bac {
    width: 100%;
}
.login-page .bac image {
    width: 100%;
}
.login-page .logo {
    width: 100upx;
}
.login-page .logo image {
    width: 100%;
    height: auto;
}
.logo-input {
    margin-top: 60upx;
}
.login-page .input-box {
    width: 600upx;
    height: 80upx;
    font-size: 26upx;
    margin-bottom: 30upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 2upx solid #999;
}
.login-page .input-box .input-icon {
    height: 38upx;
    width: 28upx;
    margin-right: 20upx;
}
.login-page .input-box .input-icon-rt {
    height: 36upx;
    width: 36upx;
}
.login-page .input-box .input-icon-rt01 {
    height: 28upx;
    width: 28upx;
}
.login-page .input-box .input {
    height: 80upx;
    font-size: 26upx;
    color: #333;
    flex: 1;
}
.login-page .input-box .placeholder {
    font-size: 24upx;
    color: #999;
}
.login-page .submit {
    height: 80upx;
    line-height: 80px;
    width: 600upx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10upx;
    margin-top: 20upx;
    color: #fff;
    background-color: #007aff;
}
.login-page .submit .submit-text {
    color: #ffffff;
    font-size: 28upx;
    line-height: 1.2;
}
.login-page .tip {
    width: 600upx;
    display: flex;
    margin-top: 40upx;
    padding: 0 6upx;
    justify-content: space-between;
}
.login-page .tip .tip-text {
    color: #007aff;
    font-size: 28upx;
}
.login-page .tip .rbox {
    text-align: right;
}
</style>
